<script setup lang="ts">
import RatioType from "@/components/RatioType.vue";
import AuthorMentionTimesTopTen from "@/components/AuthorMentionTimesTopTen.vue";
import Tree from "@/components/Tree.vue";
import FilterNovel from "@/components/FilterNovel.vue";
import NovelUpdateWeekday from "@/components/NovelUpdateWeekday.vue";
</script>

<template>
  <div class="content">
    <div class="row">
      <novel-update-weekday></novel-update-weekday>
      <ratio-type></ratio-type>
      <author-mention-times-top-ten></author-mention-times-top-ten>
    </div>
    <div class="row">
      <Tree></Tree>
      <filter-novel></filter-novel>
    </div>
  </div>
</template>

<style scoped>
.content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.row{
  width: 100%;
  height: 50vw;
  display: flex;
  flex-direction: row;
}
</style>